<template>
  <div>
    <Echart
      :options="options"
      height="600px"
      width="470px"
    />
  </div>
</template>

<script>
import Echart from '../../../common/echart'

export default {
  components: {
    Echart
  },
  // 这里是预留给你传数据的
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      options: {}
    }
  },
  watch: {
    cdata: {
      handler() {
        this.options = {
          title: {
            text: '15%',
            left: 'center',
            top: '46%',
            textStyle: {
              fontSize: 16,
              color: '#fff',
              fontStyle: 'normal',
              fontWeight: '400',
              fontFamily: 'PingFangSC-Regular,PingFang SC;'
            }
          },
          color: ['#FB497C', '#2FC25B', '#FF7714', '#FFF440', '#008AFF', '#03BDA0'],
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          series: [
            {
              name: '统计',
              type: 'pie',
              radius: [30, 80],
              center: ['50%', '50%'],
              roseType: 'radius',
              label: {
                show: true,
                formatter(params) {
                  return params.data.name
                }
              },
              emphasis: {
                label: {
                  show: true
                }
              },
              data: [
                {
                  value: 25,
                  name: '未完成'
                },
                {
                  value: 20,
                  name: '已复查'
                },
                {
                  value: 15,
                  name: '已完成'
                },
                {
                  value: 10,
                  name: '未复查'
                },
                {
                  value: 8,
                  name: '复查中'
                }
              ]
            },
            {
              name: '占位',
              type: 'pie',
              silent: true,
              center: ['50%', '50%'],
              radius: 30,
              hoverAnimation: false,
              label: {
                show: false,
                position: 'center'
              },
              data: [
                {
                  value: 1,
                  name: '占位2'
                }
              ],
              itemStyle: {
                normal: {
                  color: 'transparent',
                  shadowColor: '#fff',
                  shadowBlur: 10
                }
              }
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  }
}
</script>
